<template>
  <!-- 用户信息详情 -->
  <el-dialog v-dialogDrag :title="dialogTitle" class="dialogStyleMiddle" :visible.sync="dialogVisible">
    <el-form ref="form" :model="formData" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用户名称" prop="name">
            <el-input v-model="formData.name" readonly size="medium" placeholder />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号" prop="phone">
            <template slot="label">
              <span class="labelTitle" v-html="`手&ensp;机&ensp;号`" />
            </template>
            <el-input v-model="formData.phone" size="medium" readonly placeholder="" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="身份证号" prop="idCard">
            <el-input v-model="formData.idCard" size="medium" readonly placeholder="" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="用户类型" prop="surveyType">
            <el-input v-model="formData.surveyType" size="medium" readonly placeholder="" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属企业" prop="enterpriseName">
            <el-input v-model="formData.enterpriseName" size="medium" readonly placeholder="" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="地区" prop="enterpriseName">
            <template slot="label">
              <span class="labelTitle" v-html="`地&emsp;&emsp;区`" />
            </template>
            <el-input v-model="formData.enterpriseName" size="medium" readonly placeholder="" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <template slot="label">
              <span class="labelTitle" v-html="`状&emsp;&emsp;态`" />
            </template>
            <el-input v-model="formData.status" size="medium" readonly placeholder="" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>

<script>
import { detailPersonSupperType } from '@/api/superviseBaseInfo/typeManage/personnelType'
export default {
  name: 'DetailDialog',
  data() {
    return {
      /* 新增 start */
      dialogVisible: false,
      dialogTitle: '',
      formData: {
        id: '',
        typeName: '',
        remark: '',
        typeNum: '',
        orderNum: '',
        power: []
      }
      /* 新增 end */
    }
  },
  methods: {
    /* 详情 start */
    handleAdd(title, id) {
      this.dialogVisible = true
      this.dialogTitle = title
      this.getDetailById(id)
    },
    // 获取详情
    async getDetailById(id) {
      const { data } = await detailPersonSupperType(id)
      this.formData = { ...this.formData, ...data }

      const { allot, describe, patrol } = data
      if (allot === '1') this.formData.power.push('allot')
      if (describe === '1') this.formData.power.push('describe')
      if (patrol === '1') this.formData.power.push('patrol')
    },
    // 关闭弹窗
    cancel() {
      this.resetForm('form')
      this.dialogVisible = false
      this.formData.allot = ''
      this.formData.describe = ''
      this.formData.patrol = ''
    }
    /* 详情 end */
  }
}
</script>

